CSS slinkties laiko juostos greitis: slinkties greičiu pagrįstų animacijų įvaldymas

Nuolat kintančiame žiniatinklio kūrimo pasaulyje itin svarbu kurti patrauklias ir našias vartotojo patirtis. CSS slinkties laiko juostos suteikia galingą būdą sinchronizuoti animacijas su elementų slinkties pozicija, sukuriant vientisą ir interaktyvų pojūtį. Žengiant dar vieną žingsnį į priekį, Slinkties laiko juostos greitis leidžia animacijas valdyti ne tik pagal slinkties poziciją, bet ir pagal greitį, kuriuo vartotojas slenka. Tai atveria įdomias galimybes kurti dinamiškas ir reaguojančias vartotojo sąsajas, kurios iš tiesų reaguoja į vartotojo veiksmus.

CSS slinkties laiko juostų supratimas

Prieš gilinantis į slinkties laiko juostos greitį, prisiminkime pagrindinius CSS slinkties laiko juostų principus. Slinkties laiko juosta iš esmės susieja slankiojančio konteinerio progresą su animacijos laiko juosta. Vartotojui slenkant, animacija atitinkamai progresuoja.

Štai pagrindinis pavyzdys:

            .element {
  animation: scroll-animation 5s linear;
  animation-timeline: scroll(root);
  animation-range: entry 25% cover 75%;
}

@keyframes scroll-animation {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
            

              
                Copy
              
            
          

Šiame pavyzdyje:

• animation-timeline: scroll(root); nurodo animacijai naudoti pagrindinį slinkties elementą kaip laiko juostą.
• animation-range: entry 25% cover 75%; nurodo slinkties srities dalį, kuri valdo animaciją. Animacija prasideda, kai elementas pasiekia 25% matomumo srities, ir baigiasi, kai elementas padengia 75% matomumo srities.

Tai sukuria paprastą animaciją, kuri perkelia elementą į matomą sritį, kai vartotojas slenka puslapį žemyn. Tai puikiai tinka pagrindiniams efektams, bet ką daryti, jei norime sukurti animacijas, kurios reaguotų į slinkimo greitį?

Pristatome slinkties laiko juostos greitį

Slinkties laiko juostos greitis pakelia CSS slinkties laiko juostas į naują lygį, leisdamas animacijas valdyti slinkties greičiu. Tai suteikia galimybę kurti dinamiškesnes ir labiau įtraukiančias sąveikas. Įsivaizduokite paralakso efektą, kai fonas juda greičiau ar lėčiau priklausomai nuo to, kaip greitai vartotojas slenka, arba elementą, kuris priartėja, kai vartotojas pagreitina slinkimą.

Deja, tiesioginės CSS savybės, skirtos prieigai prie slinkties greičio, dar nėra plačiai palaikomos visose naršyklėse. Todėl dažnai turime pasitelkti JavaScript, kad apskaičiuotume slinkties greitį ir pritaikytume jį savo CSS animacijoms.

Slinkties laiko juostos greičio įgyvendinimas naudojant JavaScript

Štai žingsnis po žingsnio vadovas, kaip įgyvendinti slinkties laiko juostos greitį naudojant JavaScript:

1 žingsnis: Apskaičiuokite slinkties greitį

Pirma, turime apskaičiuoti slinkties greitį. Tai galime padaryti stebėdami slinkties poziciją laikui bėgant ir skaičiuodami skirtumą. Štai pagrindinė JavaScript funkcija, kaip tai pasiekti:

            function calculateScrollVelocity() {
  let lastScrollPosition = window.scrollY;
  let lastTimestamp = performance.now();
  let velocity = 0;

  function updateVelocity() {
    const currentScrollPosition = window.scrollY;
    const currentTimestamp = performance.now();

    const timeDiff = currentTimestamp - lastTimestamp;
    const scrollDiff = currentScrollPosition - lastScrollPosition;

    velocity = scrollDiff / timeDiff;

    lastScrollPosition = currentScrollPosition;
    lastTimestamp = currentTimestamp;

    requestAnimationFrame(updateVelocity);
  }

  updateVelocity();
  return {
    getVelocity: () => velocity
  };
}

const scrollVelocity = calculateScrollVelocity();
            

              
                Copy
              
            
          

Šis kodo fragmentas:

• Inicializuoja kintamuosius, skirtus saugoti paskutinę slinkties poziciją, laiko žymę ir greitį.
• Naudoja requestAnimationFrame, kad efektyviai atnaujintų greitį kiekviename kadre.
• Apskaičiuoja greitį, dalindamas slinkties pozicijos pokytį iš laiko pokyčio.

2 žingsnis: Pritaikykite greitį CSS kintamiesiems

Toliau turime perduoti apskaičiuotą greitį į CSS, kad galėtume jį naudoti savo animacijose. Tai galime padaryti naudodami CSS kintamuosius (pasirinktines savybes).

            const root = document.documentElement;

function updateCSSVariable() {
  const velocity = scrollVelocity.getVelocity();
  root.style.setProperty('--scroll-velocity', velocity);
  requestAnimationFrame(updateCSSVariable);
}

updateCSSVariable();
            

              
                Copy
              
            
          

Šis kodo fragmentas:

• Gauna dokumento šakninį elementą (:root).
• Naudoja setProperty, kad nustatytų --scroll-velocity CSS kintamojo vertę į apskaičiuotą greitį.
• Naudoja requestAnimationFrame, kad efektyviai atnaujintų CSS kintamąjį kiekviename kadre.

3 žingsnis: Naudokite CSS kintamąjį animacijose

Dabar, kai turime slinkties greitį kaip CSS kintamąjį, galime jį naudoti savo animacijoms valdyti. Pavyzdžiui, galėtume koreguoti paralakso fono greitį:

            .parallax-background {
  background-position: center calc(var(--scroll-velocity) * 100px);
  background-repeat: repeat;
  height: 500px;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje background-position yra atnaujinama pagal --scroll-velocity kintamąjį. Kai vartotojas slenka greičiau, fonas juda greičiau, sukuriant dinamišką paralakso efektą.

Praktiniai pavyzdžiai ir naudojimo atvejai

Slinkties laiko juostos greitis gali būti naudojamas įvairiais kūrybiškais būdais, siekiant pagerinti vartotojo patirtį. Štai keli pavyzdžiai:

1. Dinamiški paralakso efektai

Kaip minėta anksčiau, slinkties laiko juostos greitis gali būti naudojamas kuriant labiau įtraukiančius paralakso efektus. Vietoj fiksuoto paralakso greičio, fonas gali judėti greičiau ar lėčiau priklausomai nuo vartotojo slinkimo greičio. Tai sukuria natūralesnį ir jautresnį pojūtį.

2. Nuo greičio priklausomas elementų mastelio keitimas

Įsivaizduokite elementą, kuris priartėja ar tolsta priklausomai nuo slinkimo greičio. Tai galėtų būti naudojama norint pabrėžti svarbią informaciją ar sukurti gylio pojūtį. Pavyzdžiui:

            .zoom-element {
  transform: scale(calc(1 + var(--scroll-velocity) * 0.5));
  transition: transform 0.1s ease-out; /* Add smooth transition */
}
            

              
                Copy
              
            
          

Šis kodo fragmentas keičia elemento mastelį pagal --scroll-velocity. Savybė transition užtikrina sklandų priartinimo efektą.

3. Kintamo greičio progreso indikatoriai

Vietoj tiesinės progreso juostos, galėtumėte sukurti progreso indikatorių, kuris juda greičiau, kai vartotojas slenka greitai, ir lėčiau, kai slenka lėtai. Tai suteikia vartotojui tikslesnį jo progreso per turinį pojūtį.

4. Interaktyvios pamokos ir vadovai

Slinkties greitis gali būti naudojamas interaktyvių pamokų tempui valdyti. Pavyzdžiui, rodyti žingsnius ar patarimus atsižvelgiant į vartotojo slinkimo greitį. Lėtesnis slinkimas galėtų pristabdyti pamoką, suteikdamas daugiau laiko perskaityti instrukcijas, o greitesnis slinkimas galėtų praleisti žingsnius arba greitai atskleisti turinį.

Našumo optimizavimas

Dirbant su slinkties laiko juostos greičiu, našumas yra labai svarbus. Slinkties greičio skaičiavimas ir CSS kintamųjų atnaujinimas kiekviename kadre gali būti skaičiavimo požiūriu brangus. Štai keletas patarimų, kaip optimizuoti našumą:

• Debouncing arba Throttling: Naudokite debouncing arba throttling technikas, kad apribotumėte updateCSSVariable funkcijos iškvietimo dažnumą. Tai gali žymiai sumažinti per sekundę atliekamų skaičiavimų ir atnaujinimų skaičių.
• Optimizuokite animacijos savybes: Naudokite CSS savybes, kurios yra žinomos kaip našios animacijoms, pavyzdžiui, transform ir opacity. Venkite savybių, kurios sukelia išdėstymo perskaičiavimą (layout reflows), pavyzdžiui, width ir height.
• Aparatinis greitinimas: Užtikrinkite, kad animacijos būtų aparatinai pagreitintos, naudodami will-change savybę. Pavyzdžiui:

            .animated-element {
  will-change: transform;
}
            

              
                Copy
              
            
          

• Tinkamai naudokite requestAnimationFrame: Pasikliaukite requestAnimationFrame sklandiems ir efektyviems atnaujinimams, sinchronizuotiems su naršyklės atnaujinimo dažniu.

Prieinamumo aspektai

Kaip ir su bet kuria animacija, naudojant slinkties laiko juostos greitį svarbu atsižvelgti į prieinamumą. Pernelyg didelės ar blaškančios animacijos gali kelti problemų vartotojams su vestibiuliariniais sutrikimais ar kitais jautrumais.

• Suteikite galimybę išjungti animacijas: Leiskite vartotojams išjungti animacijas, jei jos jiems atrodo blaškančios ar trikdančios. Tai galima padaryti su paprasta žymimąja langeliu, kuris perjungia CSS klasę body elemente.
• Naudokite subtilias animacijas: Venkite per daug staigių ar ryškių animacijų. Subtilios animacijos yra mažiau linkusios sukelti problemų jautriems vartotojams.
• Užtikrinkite, kad animacijos neperduotų kritinės informacijos: Nepasikliaukite vien animacijomis svarbiai informacijai perduoti. Įsitikinkite, kad informacija taip pat prieinama tekstu ar kitais prieinamais formatais.
• Testuokite su pagalbinėmis technologijomis: Išbandykite savo animacijas su ekrano skaitytuvais ir kitomis pagalbinėmis technologijomis, kad užtikrintumėte, jog jos yra prieinamos visiems vartotojams.

Naršyklių suderinamumas ir polifilai

Nors CSS slinkties laiko juostos ir slinktimi valdomų animacijų koncepcija populiarėja, naršyklių palaikymas gali skirtis. Būtina tikrinti suderinamumo lenteles (pavyzdžiui, caniuse.com) ir, esant reikalui, apsvarstyti polifilų naudojimą, siekiant užtikrinti, kad jūsų animacijos veiktų skirtingose naršyklėse ir įrenginiuose.

Slinktimi valdomų animacijų ateitis

Slinktimi valdomų animacijų ateitis atrodo šviesi. Tobulėjant naršyklių palaikymui CSS slinkties laiko juostoms ir susijusioms funkcijoms, galime tikėtis dar kūrybiškesnių ir patrauklesnių vartotojo sąsajų. Vietinis slinkties greičio savybių palaikymas CSS dar labiau supaprastintų įgyvendinimą ir pagerintų našumą.

Išvada

CSS slinkties laiko juostos greitis suteikia galingą būdą kurti dinamiškas ir reaguojančias vartotojo sąsajas, kurios reaguoja į slinkimo greitį. Naudodami JavaScript slinkties greičiui apskaičiuoti ir pritaikyti jį CSS kintamiesiems, galite sukurti platų patrauklių efektų spektrą, nuo dinamiškų paralakso fonų iki nuo greičio priklausomo elementų mastelio keitimo. Nepamirškite optimizuoti našumo ir atsižvelgti į prieinamumą, kad jūsų animacijos būtų ir patrauklios, ir įtraukios. Tobulėjant slinktimi valdomų animacijų technikoms, nuolatinis domėjimasis naujovėmis leis jums kurti įtikinamas ir malonias žiniatinklio patirtis.

Šaltiniai

• MDN Web Docs: animation-timeline
• Chrome Developers: Slinktimi valdomos animacijos